<?php
/**
 * Created by PhpStorm.
 * User: Daniel
 * Date: 2017/12/17
 * Time: 18:20
 */

/* @var $this yii\web\View */
/* @var $form yii\bootstrap\ActiveForm */
/* @var $model app\models\LoginForm */

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

?>

<!-- Start right Content here -->
<!-- DataTables -->
<style>
    .footer{
        display: none;
    }
    .dt-buttons{
        float: right;
    }
</style>


<link href="assets/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary">
            <div class="panel-body">
                <h4 class="m-b-30 m-t-0">用户管理</h4>
                <div class="col-xs-6 col-sm-3 m-t-30">
                    <!-- sample modal content -->
                    <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                    <h4 class="modal-title" id="myModalLabel">设置角色</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal" action="save" method="post">
                                        <div class="form-group hidden">
                                            <label for="inputEmail3" class="col-sm-3 control-label">uid</label>
                                            <div class="col-sm-9">
                                                <input type="text" name="uid" class="form-control" id="uid" placeholder="uid">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
                                            <div class="col-sm-9">
                                                <input readonly="readonly"  name="userName" type="text" class="form-control" id="userName" placeholder="用户名">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-3 control-label">角色</label>
                                            <div class="col-sm-9">
                                                <input type="number" name="role" class="form-control" id="role" placeholder="0">
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">取 消</button>
                                            <button type="submit" class="btn btn-primary waves-effect waves-light">确 定</button>
                                        </div>
                                    </form>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->
                </div>
                <table id="datatable-buttons" class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户名</th>
                        <th>用户角色</th>
                        <th>设置角色</th>
                    </tr>
                    </thead>

                    <tbody>

                    <?php foreach ($list as $info): ?>
                        <tr>
                            <td><?= $info['userId'] ?></td>
                            <td><?= $info['userName'] ?></td>
                            <td><?= $info['role'] ?></td>
                            <td><button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" onclick="show('<?= $info['userId'] ?>','<?= $info['role'] ?>','<?= $info['userName'] ?>')">编辑</button></td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>

            </div>
        </div>
    </div>

</div> <!-- End Row -->

<script src="assets/js/jquery.min.js"></script>

<!-- Datatables-->
<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="assets/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="assets/plugins/datatables/buttons.bootstrap.min.js"></script>
<script src="assets/plugins/datatables/jszip.min.js"></script>
<script src="assets/plugins/datatables/pdfmake.min.js"></script>
<script src="assets/plugins/datatables/vfs_fonts.js"></script>
<script src="assets/plugins/datatables/buttons.html5.min.js"></script>
<script src="assets/plugins/datatables/buttons.print.min.js"></script>
<script src="assets/plugins/datatables/dataTables.fixedHeader.min.js"></script>
<script src="assets/plugins/datatables/dataTables.keyTable.min.js"></script>
<script src="assets/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="assets/plugins/datatables/responsive.bootstrap.min.js"></script>
<script src="assets/plugins/datatables/dataTables.scroller.min.js"></script>
<!-- Datatable init js -->
<script>
    !function($) {
        "use strict";

        var DataTable = function() {
            this.$dataTableButtons = $("#datatable-buttons")
        };
        DataTable.prototype.createDataTableButtons = function() {
            0 !== this.$dataTableButtons.length && this.$dataTableButtons.DataTable({
                dom: "Bfrtip",
                buttons: [

                ],
                responsive: !0
            });
        },
            DataTable.prototype.init = function() {
                //creating demo tabels
                $('#datatable').dataTable();
                $('#datatable-keytable').DataTable({keys: true});
                $('#datatable-responsive').DataTable();
                $('#datatable-scroller').DataTable({
                    ajax: "assets/plugins/datatables/json/scroller-demo.json",
                    deferRender: true,
                    scrollY: 380,
                    scrollCollapse: true,
                    scroller: true
                });
                var table = $('#datatable-fixed-header').DataTable({fixedHeader: true});

                //creating table with button
                this.createDataTableButtons();
            },
            //init
            $.DataTable = new DataTable, $.DataTable.Constructor = DataTable
    }(window.jQuery),

//initializing
        function ($) {
            "use strict";
            $.DataTable.init();
        }(window.jQuery);

     function show(_uid,role,name){
         var myModal = $("#myModal");
         $("#uid").val(_uid);
         $("#role").val(role);
         $("#userName").val(name);
         myModal.modal("show");
     }
</script>

